<template>
  <!-- 设置页面(保留)  -->
    <div class="setting">
        <el-collapse v-model="activeName" accordion class="collapse">
            <el-collapse-item name="2" title="个性化调整">
                <div class="item">
                    <span class="text">建站日期显示</span>
                    <el-switch
                            v-model="siteStartShow"
                            :active-icon="CheckSmall"
                            :inactive-icon="CloseSmall"
                            inline-prompt
                    />
                </div>
            </el-collapse-item>
            <el-collapse-item name="4" title="其他设置">
                <div>设置内容待增加</div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script setup>
import {CheckSmall, CloseSmall} from "@icon-park/vue-next";
import {mainStore} from "@/store";
import {storeToRefs} from "pinia";

const store = mainStore();
const {siteStartShow} = storeToRefs(store);
</script>

<style lang="scss" scoped>
.setting {
  .collapse {
    border-radius: 8px;
    --el-collapse-content-bg-color: #ffffff10;
    border-color: transparent;
    overflow: hidden;

    :deep(.el-collapse-item__header) {
      background-color: #ffffff30;
      color: #fff;
      font-size: 15px;
      padding-left: 18px;
      border-color: transparent;
    }

    :deep(.el-collapse-item__wrap) {
      border-color: transparent;

      .el-collapse-item__content {
        padding: 20px;

        .item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;

          .el-switch__core {
            border-color: transparent;
            background-color: #ffffff30;
          }
        }

        .bg-set {
          .el-radio-group {
            justify-content: space-between;

            .el-radio {
              margin: 10px 16px;
              background: #ffffff26;
              border: 2px solid transparent;
              border-radius: 8px;

              .el-radio__label {
                color: #fff;
              }

              .el-radio__inner {
                background: #ffffff06 !important;
                border: 2px solid #eeeeee !important;
              }

              &.is-checked {
                background: #ffffff06 !important;
                border: 2px solid #eeeeee !important;
              }

              .is-checked {
                .el-radio__inner {
                  background-color: #ffffff30 !important;
                  border-color: #fff !important;
                }

                & + .el-radio__label {
                  color: #fff !important;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
